<template>
  <el-dialog
    ref="form"
    :title="formTitle"
    custom-class="hcframe-dialog"
    v-model="visible"
    :close-on-click-modal="false"
    :before-close="beforeCancelForm"
  >
    <el-form
      ref="formCommon"
      :model="formData"
      label-width="130px"
      :rules="formRules"
    >
      <div v-for="col in formKey" :key="col.fieldName">
        <component
          :is="'el-form-item'"
          v-if="col.isForm === 1"
          :label="col.nameCn"
          :prop="col.fieldName"
        >
          <div style="width: 100%">
            <component
              :is="col.webType"
              v-if="
                col.javaType !== 'date' &&
                col.javaType !== 'datetime' &&
                col.webType !== 'textArea' &&
                col.webType !== 'password' &&
                col.webType !== 'tree' &&
                col.webType !== 'multiSelect'
              "
              v-model="formData[col.fieldName]"
              filterable
              :type="col.javaType"
              style="width: 80%"
              :value-format="timeFormat"
              :disabled="disFunction(col.isChange, col.fieldName)"
              :readonly="readonly"
            >
              <div v-if="col.selectList">
                <component
                  :is="'el-option'"
                  v-for="(sel, val) in col.selectList"
                  :key="val"
                  :label="sel.selectKey"
                  :value="sel.selectValue"
                />
              </div>
            </component>
            <multi-select
              v-if="col.webType === 'multiSelect'"
              v-model="formData[col.fieldName]"
              style="width: 80%"
              :props="multiSelectProps"
              :java-type="col.javaType"
              :select-list="col.selectList"
              :disabled="disFunction(col.isChange, col.fieldName)"
            />
            <select-tree
              v-if="col.webType === 'tree'"
              v-model="formData[col.fieldName]"
              style="width: 80%"
              :tree-date="tree[col.fieldName]"
              :tree-props="treeProps"
              :disabled="disFunction(col.isChange, col.fieldName)"
            />
            <el-input
              v-if="col.webType === 'textArea'"
              v-model="formData[col.fieldName]"
              style="width: 80%"
              type="textarea"
              autosize
              :readonly="readonly"
              :disabled="disFunction(col.isChange, col.fieldName)"
            />
            <el-input
              v-if="col.webType === 'password'"
              v-model="formData[col.fieldName]"
              style="width: 80%"
              type="password"
              :readonly="readonly"
              :disabled="disFunction(col.isChange, col.fieldName)"
            />
            <el-col v-if="!isAdd && col.javaType === 'date'" :span="8">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="formData[col.fieldName + '_start']"
                  type="datetime"
                  placeholder="选择时间"
                  style="width: 95%"
                  :value-format="timeFormat"
                  :readonly="readonly"
                />
              </el-form-item>
            </el-col>
            <el-form-item
              prop="date1"
              v-if="
                isAdd &&
                (col.javaType === 'date' || col.javaType === 'datetime')
              "
            >
              <el-date-picker
                v-model="formData[col.fieldName]"
                placeholder="选择时间"
                style="width: 80%"
                format="YYYY-MM-DD HH:mm:ss"
                :value-format="timeFormat"
              />
            </el-form-item>
            <el-col
              v-if="!isAdd && col.javaType === 'date'"
              class="line"
              :span="1"
            >
              -
            </el-col>
            <el-col v-if="!isAdd && col.javaType === 'date'" :span="10">
              <el-form-item prop="date2">
                <el-date-picker
                  v-model="formData[col.fieldName + '_end']"
                  :type="col.javaType"
                  placeholder="选择时间"
                  style="width: 80%"
                  :readonly="readonly"
                />
              </el-form-item>
            </el-col>
          </div>
        </component>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelForm"> 取消 </el-button>
        <el-button
          v-if="showSubmitButton"
          type="primary"
          @click="formSubmit('formCommon', formType)"
        >
          {{ formSubBotton }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Prop, Options, Vue, Emit, Watch } from "vue-property-decorator";
import SelectTree from "/@/components/CommonCo/el-tree-select.vue";
import MultiSelect from "/@/components/CommonCo/multiSelect.vue";
@Options({
  name: "formCo",
  components: {
    SelectTree,
    MultiSelect
  }
})
export default class formCo extends Vue {
  // 时间传给后台默认格式化
  @Prop({ type: String, default: "x" }) timeFormat!: string;
  // 表单标题
  @Prop(String) formTitle!: string;
  // 表单数据  可为空
  @Prop(Object) formData!: object;
  // 展示关闭表单
  @Prop(Boolean) formVisible!: boolean;
  // 表单key值
  @Prop(Array) formKey!: Array<object>;
  // 表单提交按钮显示文字
  @Prop(String) formSubBotton!: string;
  // 表单校验规则
  @Prop(Object) formRules!: object;
  // 是否是添加或编辑 如果否,则是搜索表单
  @Prop({ type: Boolean, default: true }) isAdd!: boolean;
  // 表单提交类型 1为新增，2为编辑
  @Prop() formType!: number;
  // 表单不可编辑的部分
  @Prop() disableField!: Array<any>;
  // 是否显示提交按钮
  @Prop({ type: Boolean, default: true }) showSubmitButton!: boolean;

  @Prop({ type: Boolean, default: false }) readonly!: boolean;

  private visible = false;

  @Watch("formVisible")
  private searchFilter(value: any) {
    this.visible = value;
  }

  @Prop({
    type: Object,
    default: function () {
      return {
        children: "children",
        label: "NAME",
        value: "CODE"
      };
    }
  })
  private treeProps?: any;

  private multiSelectProps = {
    label: "selectKey",
    value: "selectValue",
    key: "selectValue"
  };
  // 获取树状数据
  @Prop() private treeData!: any;

  get tree() {
    return this.treeData;
  }

  // 禁用表单输入框方法
  disFunction(change: any, fieldName: any) {
    // eslint-disable-next-line no-unused-vars
    let flag = false;
    this.disableField.forEach(value => {
      if (value === fieldName) {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        flag = true;
      }
    });
    if (this.formType === 1) {
      let flag = false;
      this.disableField.forEach(value => {
        if (value === fieldName) {
          flag = true;
        }
      });
      return flag;
    } else {
      if (change === 0) {
        return true;
      } else {
        let flag = false;
        this.disableField.forEach(value => {
          if (value === fieldName) {
            flag = true;
          }
        });
        return flag;
      }
    }
  }

  // 提交表单
  @Emit()
  formSubmit(val: any, type: number) {
    return { val: val, type: type };
  }

  // 关闭表单
  @Emit()
  cancelForm() {}

  // 关闭表单前的操作
  @Emit()
  beforeCancelForm() {}

  formatSelectVal(val: any, type: string) {
    if (type === "Integer") {
      return +val;
    } else {
      return val;
    }
  }

  formatDate(timestamp: number) {
    return new Date(timestamp);
  }
}
</script>

<style scoped></style>
